<template>
    <div class="user">
        <div class="avatar">
            <img :src="user.avatar" alt="" />
        </div>
        <div class="user-info">
            <div class="name">{{ user.name }}</div>
            <div class="desc">{{ user.desc }}</div>
        </div>
        <div class="setting">
            <IconEpSetting />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// import { useStore } from '@/store'
// import { computed } from 'vue'
// const store = useStore()
// const name = computed(() => store.user)

const user = ref({
    name: 'user',
    avatar: 'https://avatars.githubusercontent.com/u/1164541?v=4',
    desc: '测试测试'
})
</script>

<style lang="scss" scoped>
.user {
    border-top: 1px solid var(--color-border);
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    .user-info {
        flex: 1;
        color: #666;

        .name {
            font-size: 14px;
        }

        .desc {
            font-size: 12px;
            color: #999;
        }
    }

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
    }
}
</style>
